<template>
	<div class="wrap">
		<div class="header">
			<span>ele.me</span>
			<span>
				<router-link to="/login" v-if="!usr">登录|注册</router-link>
				<router-link to="/my" v-else><img src="../js/img/wo0.png" alt=""></router-link>
			</span>
		</div>
		<div class="dangqian">
			<span class="color6">当前定位城市：</span>
			<span class="jianju">定位不准时，请在城市列表中选择</span>
		</div>
		<router-link :to="{path:'/indexcity',query:{name:guess.name,id:guess.id}}">
			<div class="chengshi">
				<span>{{guess.name}}</span>
				<span><img src="../../public/img/jiantou.png" alt=""></span>
			</div>
		</router-link>
		
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				guess: "",
			}
		},
		computed: {
			usr() {
				return this.$store.state.username;
			},
			password() {
				return this.$store.state.password;
			},
		},
		
		created() {
			let obj = this;
			this.$axios({
				url: "https://elm.cangdu.org/v1/cities?type=guess",
				method: "get",
			}).then(function(res) {
				obj.guess = res.data;
			})
		}
	}
</script>

<style scoped>
	.wrap {
		width: 100%;
	}

	.header {
		background: rgb(49, 144, 232);
		display: flex;
		height: 45.7px;
		justify-content: space-between;
		line-height: 45.7px;
		padding: 0 10px 0 10px;
	}
	.header img{
		width: 20px;
		height: 25px;
		margin-top: 10px;
	}

	.header span {
		font-size: 16px;
		color: white;
	}

	.dangqian {
		padding: 8px 0 8px 0;
		font-size: 12px;
		display: flex;
		justify-content: space-around;
		background: #FFFFFF;
	}

	.dangqian span {
		color: #9f9f9f;
	}

	.dangqian .color6 {
		color: #666;
	}

	.dangqian .jianju {
		font-size: 10px;
		font-weight: 600;
	}

	.chengshi {
		height: 42px;
		color: #3190e8;
		font-size: 15px;
		background: #FFFFFF;
		margin-top: 1px;
		display: flex;
		justify-content: space-between;
		line-height: 44.7px;
		padding: 0 10px 0 10px;
	}

	.chengshi img {
		padding-top: 9px;
		width: 23px;
	}
</style>
